import React, { Component, createRef } from 'react'
import './index.css'
export default class Header extends Component {
    // 方式一：
    // titleRef = createRef()
    // 方式三 受控组件获取
    // state = {
    //     title: ''
    // }
    render() {
        // 2. 接收父组件传递的方法
        let {addTodo} = this.props
        return (
            <div className="todo-header">
                <input ref={this.titleRef} onKeyUp={(e) => {
                    // 判断是不是按的回车
                    if (e.code !== 'Enter') return;
                    // 获取title
                    let title = e.target.value
                    // 3. 调用父组件方法，并将title传递给App
                    addTodo(title)
                    // 4. 清空文本框
                    e.target.value = ''
                    
                }} type="text" placeholder="请输入你的任务名称，按回车键确认" />

                {/* <input ref={this.titleRef} onKeyUp={(e) => {
                    // 判断是不是按的回车
                    if (e.code !== 'Enter') return;
                    // 说明按的是回车
                    // 获取用户输入内容 方式一：
                    // let title = this.titleRef.current.value
                    // 方式二：通过事件对象获取
                    // let title = e.target.value
                    // console.log('title: ',title)
                    // 方式三：
                    console.log('title', this.state.title)

                }} value={this.state.title} onChange={(e) => {
                    this.setState({
                        title: e.target.value
                    })
                }} type="text" placeholder="请输入你的任务名称，按回车键确认" /> */}
            </div>
        )
    }
}
